<script setup>
import { getJobListPassApi } from '@/api/job'
import { ref } from 'vue'
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
const jobData = ref([])
async function initData() {
  const res = await getJobListPassApi()
  jobData.value = res.data
}
initData()
</script>

<template>
  <div class="notice-wrapper">
    <div class="title">
      <i class="iconfont icon-notice"></i>
      最新职位招聘
    </div>
    <div class="content-list">
      <vue3-seamless-scroll :list="jobData" class="scroll">
        <div class="content-item" v-for="(item, index) in jobData" :key="index">
          <div class="item-left">
            <div class="item-title">
              <i class="iconfont icon-company"></i>
              {{ item.enterpriseName }}
            </div>
            <div class="item-info">
              <span class="time">
                <i class="iconfont icon-time"></i>
                {{ item.create_time }}
              </span>
              <span class="divider">|</span>
              <span class="job-name">
                <i class="iconfont icon-job"></i>
                {{ item.jobName }}
              </span>
            </div>
          </div>
        </div>
      </vue3-seamless-scroll>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.notice-wrapper {
  background-color: #fff;
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background: linear-gradient(135deg, transparent 50%, rgba(64, 158, 255, 0.05));
    border-radius: 0 0 0 100%;
  }
  
  .title {
    padding: 16px 20px;
    color: #2c3e50;
    font-size: 24px;
    font-weight: 600;
    border-bottom: 2px solid #f0f2f5;
    letter-spacing: 2px;
    position: relative;
    display: flex;
    align-items: center;
    background: linear-gradient(to right, #f6f7f8, #fff);

    .iconfont {
      margin-right: 10px;
      color: #3c9bef;
      font-size: 24px;
    }
  }

  .content-list {
    flex: 1;
    overflow: hidden;
    padding: 15px 0;

    .content-item {
      padding: 15px 20px;
      transition: all 0.3s ease;
      border-bottom: 1px solid #f0f2f5;
      position: relative;
      
      &:hover {
        background-color: #f8f9fa;
        transform: translateX(5px);
        
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
          width: 4px;
          background: #3c9bef;
          border-radius: 0 2px 2px 0;
        }
      }

      .item-left {
        .item-title {
          color: #3c9bef;
          font-size: 18px;
          font-weight: 600;
          margin-bottom: 8px;
          display: flex;
          align-items: center;
          
          .iconfont {
            margin-right: 8px;
            font-size: 18px;
          }
          
          &:hover {
            color: #1976d2;
          }
        }

        .item-info {
          color: #666;
          font-size: 16px;
          display: flex;
          align-items: center;
          
          .time {
            color: #666;
            display: flex;
            align-items: center;
            
            .iconfont {
              margin-right: 4px;
              font-size: 16px;
            }
          }
          
          .divider {
            margin: 0 12px;
            color: #ddd;
          }
          
          .job-name {
            color: #2c3e50;
            font-weight: 500;
            font-size: 16px;
            display: flex;
            align-items: center;
            
            .iconfont {
              margin-right: 4px;
              font-size: 16px;
              color: #3c9bef;
            }
          }
        }
      }
    }
  }
}

// 添加动画效果
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.content-item {
  animation: fadeIn 0.5s ease-out forwards;
}
</style>
